<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">摄像头</small>
      </a>
    </header>
    <main>
      <div class="video">
        <ul>
          <li v-for="item in listData" :key='item.unid'>
            <my-video :sources="[{src:item.pathHLS,type:'video/mp4'}]" :options="video.options"></my-video>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
  
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    Vedio
  } from '../../api/api'
  import myVideo from 'vue-video'
  export default {
    components: {
      myVideo
    },
    data() {
      return {
        src: '',
        listData: [{
          pathHLS: ''
        }],
        video: {
          options: {
            autoplay: false,
            volume: 0.6,
            poster: '../../static/img/vedio.png'
          }
        }
      };
    },
    methods: {
      getData() {
        let options = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          }
        }
        //调取接口
        Vedio(options).then((res) => {
  
          if (res.success === true) {
            this.listData = res.data;
            this.url = res.data.pathHLS;
           // console.log(this.url);
          }
        })
      }
    },
  
    //页面加载时候
    mounted() {
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .video {
    width: 98%;
    margin: 10px auto;
    ul{
      width: 100%;
      overflow: hidden;
    li {
          width:49%;
          float: left;
          overflow: hidden;
          margin-bottom: 10px;
          background: #fff;
          box-shadow: 0px 3px 12px #ccc;
          #app{
            height: 108px;
          }
          p {
            margin:5px 0px 5px 5px;
            font-size: 1rem;
            color: #999;
          }
        }
    }
  }
  .video ul li:nth-child(odd){ margin-right: 2%}
</style>
